<template>
  <div class="container">
    <!-- 学校对公账户 Section -->
    <div class="section">
      <h2 class="section-title">学校对公账户</h2>
      <div class="info-text">供大家签署科研合同时调用</div>

      <div class="info-group">
        <div class="info-item">
          <span class="label">户名：</span>
          <span class="value">XXXX大学</span>
        </div>

        <div class="info-item">
          <span class="label">账户：</span>
          <span class="value">1000 9999 6666 8888</span>
        </div>

        <div class="info-item">
          <span class="label">开户银行：</span>
          <span class="value">XX银行XX市分行XX支行</span>
        </div>

        <button class="copy-btn" @click="copyBankInfo">复制</button>
      </div>
    </div>

    <!-- 单位发票抬头 Section -->
    <div class="section">
      <h2 class="section-title">单位发票抬头</h2>

      <div class="info-group">
        <div class="info-item">
          <span class="label">单位名称：</span>
          <span class="value">XXXX大学</span>
        </div>

        <div class="info-item">
          <span class="label">单位税号：</span>
          <span class="value">12345678901234567E</span>
        </div>

        <div class="info-item">
          <span class="label">单位地址：</span>
          <span class="value">XX省XX市XX区XX路XX号XXXX大学</span>
        </div>

        <div class="info-item">
          <span class="label">电话号码：</span>
          <span class="value">010-8888888</span>
        </div>

        <div class="info-item">
          <span class="label">开户银行：</span>
          <span class="value">XX银行XX分行XX支行</span>
        </div>

        <div class="info-item">
          <span class="label">银行账户：</span>
          <span class="value">1000 9999 6666 8888</span>
        </div>

        <button class="copy-btn" @click="copyInvoiceInfo">复制</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

// 银行账户信息
const bankInfo = {
  name: 'XXXX大学',
  account: '1000 9999 6666 8888',
  bank: 'XX银行XX市分行XX支行'
}

// 发票信息
const invoiceInfo = {
  name: 'XXXX大学',
  taxId: '12345678901234567E',
  address: 'XX省XX市XX区XX路XX号XXXX大学',
  phone: '010-8888888',
  bank: 'XX银行XX分行XX支行',
  account: '1000 9999 6666 8888'
}

// 复制银行账户信息
const copyBankInfo = () => {
  const text = `户名：${bankInfo.name}\n账户：${bankInfo.account}\n开户银行：${bankInfo.bank}`
  copyToClipboard(text)
}

// 复制发票信息
const copyInvoiceInfo = () => {
  const text = `单位名称：${invoiceInfo.name}\n单位税号：${invoiceInfo.taxId}\n单位地址：${invoiceInfo.address}\n电话号码：${invoiceInfo.phone}\n开户银行：${invoiceInfo.bank}\n银行账户：${invoiceInfo.account}`
  copyToClipboard(text)
}

// 复制到剪贴板的通用函数
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage({
      message: '复制成功',
      type: 'success',
      duration: 2000
    })
  } catch (err) {
    ElMessage({
      message: '复制失败，请手动复制',
      type: 'error',
      duration: 2000
    })
  }
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0 0 16px 0;
}

.info-text {
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
}

.info-group {
  position: relative;
}

.info-item {
  margin-bottom: 16px;
  line-height: 1.5;
}

.label {
  color: #666;
  font-size: 14px;
  margin-right: 8px;
  display: inline-block;
  min-width: 80px;
}

.value {
  color: #333;
  font-size: 14px;
}

.copy-btn {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 16px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.copy-btn:hover {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

.copy-btn:active {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}
</style>
